<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑用户 - 电动车销售系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/purchase.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin/updateuser.css">
</head>
<body>
<header class="dashboard-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-0"><i class="bi bi-bicycle"></i> 电动车销售管理系统</h1>
                <p class="mb-0 opacity-75">系统管理员工作台</p>
            </div>
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <span class="d-none d-md-inline">${currentUser.name}</span>
                    <div class="badge bg-light text-dark">
                        <i class="bi bi-person-circle me-1"></i>
                        <c:choose>
                            <c:when test="${currentUser.role == 4}">系统管理员</c:when>
                            <c:when test="${currentUser.role == 0}">销售管理员</c:when>
                            <c:when test="${currentUser.role == 1}">仓库管理员</c:when>
                            <c:when test="${currentUser.role == 2}">销售管理员</c:when>
                            <c:when test="${currentUser.role == 3}">售后管理员</c:when>
                        </c:choose>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-light rounded-circle p-1" type="button" data-bs-toggle="dropdown">
                        <i class="bi bi-gear fs-5"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/change_password.jsp"><i class="bi bi-lock me-2"></i> 修改密码</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="${pageContext.request.contextPath}/LogoutServlet"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container my-4">
    <div class="card shadow">
        <div class="card-header d-flex justify-content-between align-items-center py-3">
            <h5 class="m-0"><i class="bi bi-person-gear me-2"></i>编辑用户信息</h5>
            <a href="${pageContext.request.contextPath}/UserListServlet" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> 返回列表
            </a>
        </div>

        <div class="card-body">
            <c:if test="${not empty errorMsg}">
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    <i class="bi bi-exclamation-triangle me-2"></i> ${errorMsg}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </c:if>

            <form action="${pageContext.request.contextPath}/UpdateUserServlet" method="post">
                <input type="hidden" name="id" value="${user.id}">

                <div class="mb-3">
                    <label class="form-label">用户ID</label>
                    <input type="text" class="form-control" value="${user.id}" disabled>
                </div>

                <div class="mb-3">
                    <label class="form-label">用户名</label>
                    <input type="text" class="form-control" name="name" value="${user.name}" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">密码</label>
                    <input type="password" class="form-control" name="pass" value="${user.password}" required>
                    <div class="form-text">请输入新密码或保留原密码</div>
                </div>

                <div class="mb-4">
                    <label class="form-label">用户角色</label>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="role-card ${user.role == 0 ? 'selected' : ''}" data-role="0">
                                <div class="text-center p-3">
                                    <div class="role-badge role-sales">业务员</div>
                                    <h6 class="mt-2 mb-1">销售人员</h6>
                                    <p class="text-muted small mb-0">负责销售业务</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="role-card ${user.role == 1 ? 'selected' : ''}" data-role="1">
                                <div class="text-center p-3">
                                    <div class="role-badge role-warehouse">仓库管理员</div>
                                    <h6 class="mt-2 mb-1">仓库管理员</h6>
                                    <p class="text-muted small mb-0">负责库存管理</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="role-card ${user.role == 2 ? 'selected' : ''}" data-role="2">
                                <div class="text-center p-3">
                                    <div class="role-badge role-salesadmin">销售管理员</div>
                                    <h6 class="mt-2 mb-1">销售管理员</h6>
                                    <p class="text-muted small mb-0">负责销售管理</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="role-card ${user.role == 3 ? 'selected' : ''}" data-role="3">
                                <div class="text-center p-3">
                                    <div class="role-badge role-aftersales">售后管理员</div>
                                    <h6 class="mt-2 mb-1">售后管理员</h6>
                                    <p class="text-muted small mb-0">负责售后服务</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="role-card ${user.role == 4 ? 'selected' : ''}" data-role="4">
                                <div class="text-center p-3">
                                    <div class="role-badge role-admin">系统管理员</div>
                                    <h6 class="mt-2 mb-1">系统管理员</h6>
                                    <p class="text-muted small mb-0">负责系统管理</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="roleInput" name="role" value="${user.role}">
                </div>

                <div class="d-flex justify-content-end">
                    <button type="reset" class="btn btn-outline-secondary me-2">重置</button>
                    <button type="submit" class="btn btn-primary">更新用户</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 角色卡片选择功能
    document.querySelectorAll('.role-card').forEach(card => {
        card.addEventListener('click', function() {
            // 移除所有卡片的选中状态
            document.querySelectorAll('.role-card').forEach(c => {
                c.classList.remove('selected');
            });

            // 添加当前卡片的选中状态
            this.classList.add('selected');

            // 更新隐藏的输入值
            document.getElementById('roleInput').value = this.getAttribute('data-role');
        });
    });

    // 自动关闭消息提示
    document.querySelectorAll('.alert .btn-close').forEach(button => {
        button.addEventListener('click', function() {
            this.closest('.alert').style.display = 'none';
        });
    });

    // 5秒后自动关闭消息提示
    setTimeout(() => {
        document.querySelectorAll('.alert').forEach(alert => {
            alert.style.display = 'none';
        });
    }, 5000);
</script>
</body>
</html>